<!--
  功能：评论管理
  作者：zzb
  邮箱：2283325110@qq.com
  时间：2021年06月09日 15:39:14
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="">
    <!-- 搜索框 -->
    <div class="btn">
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item>
          <el-input v-model="params.comment" placeholder="输入评论"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="params.status" placeholder="选择状态" clearable>
            <el-option label="审核通过" value="审核通过"></el-option>
            <el-option label="审核不通过" value="审核不通过"></el-option>
            <el-option label="未审核" value="未审核"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="load">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tab">
      <el-table :data="tableData.list" style="width: 100%">
        <el-table-column prop="cusId" align="center" label="顾客Id">
        </el-table-column>
        <el-table-column prop="content" align="center" label="评论的内容">
        </el-table-column>
        <el-table-column
          prop="commentTime"
          align="center"
          label="评论的时间"
          :formatter="dateFormat"
        >
        </el-table-column>
        <el-table-column prop="orderId" align="center" label="评论的订单id">
        </el-table-column>
        <el-table-column prop="status" align="center" label="状态">
        </el-table-column>
        <el-table-column align="center" label="操作">
          <template #default="scope">
            <el-button
              v-if="scope.row.status == '审核通过'"
              size="mini"
              @click="nopass(scope.$index, scope.row)"
              type="text"
              >不通过审核</el-button
            >
            <el-button
              v-else
              size="mini"
              @click="pass(scope.$index, scope.row)"
              type="text"
              >通过审核</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableData.page + 1"
        :page-sizes="[5, 8, 10, 12]"
        :page-size="tableData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
    <!-- 模态框 -->
    <!-- <div>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="描述信息" :label-width="formLabelWidth">
            <el-input v-model="form.description" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="价格" :label-width="formLabelWidth">
            <el-input v-model="form.price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="状态" :label-width="formLabelWidth">
            <el-select v-model="form.status" placeholder="请选择状态">
              <el-option label="下架" value="下架"></el-option>
              <el-option label="正常" value="正常"></el-option>
            </el-select>
          </el-form-item>     
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </div>
      </el-dialog>
    </div> -->
  </div>
</template>

<script>
import request from "@/utils/request";
import qs from "qs";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      dialogFormVisible: false,
      //   新增或编辑用的表单
      // form: {
      //   name:'',
      // },
      formLabelWidth: "120px",
      title: "",
      currentPage4: 4,
      //   数据展示的表格数据
      tableData: [],
      //   模糊查询的数据
      params: {
        page: 0,
        pageSize: 10,
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 时间戳转换
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      var moment = require("moment");
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    load() {
      request.post("/comment/query", qs.stringify(this.params)).then((res) => {
        //console.log(res.data.list)
        if (!this.params.status) {
          this.tableData = res.data;
        } else {
          let list = res.data.list.filter((item, index) => {
            return this.params.status == item.status;
          });
          // res.data.list = list
          //console.log(res.data.list)
          this.tableData.list = list;
        }
      });
    },
    handleSizeChange(val) {
      this.params.pageSize = val;
      // console.log(`每页 ${val} 条`);
      this.load();
    },
    handleCurrentChange(val) {
      this.params.page = val - 1;
      // console.log(`当前页: ${val}`);
      this.load();
    },
    //通过审核
    pass(index, row) {
      console.log(row)
      row.status = '审核通过'
      request.get("/comment/commentExamine?commentid="+row.id).then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
      this.load();
        });
    },
    // 不通过审核
    nopass(index, row) {
      row.status = '审核不通过'
      request.get("/comment/commentRefuseExamine?commentid="+row.id).then((res) => {
          this.$message({
            message: res.message,
            type: "success",
          });
      this.load();
        });
    },
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.load();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
</style>
